<template>
  <a-spin :spinning="spinning">
    <div class="body">
      <!-- 左边内容 -->
      <div class="left">
        <a-input-search placeholder="搜索规则名称" allowClear style="width: 343px; height: 32px; margin-top: 14px" @search="onSearch" />
        <div class="left-top">
          <span class="title">工价规则</span>
          <div
            style="
            display: flex;
            flex-direction: row;
            align-items: center;
            cursor: pointer;
          "
            @click="onCreate"
          >
            <a-icon type="plus-circle" class="icon" />
            <span class="title1">新增规则</span>
          </div>
        </div>
        <div class="xian"></div>
        <div
          class="left-center"
          v-for="(item, index) in list"
          :key="index + 1"
          :class="listIndex == index ? 'active' : ''"
          @click="onClickRule(item, index)"
        >
          <span :class="listIndex === index ? 'listTitle' : 'left-center-title'">{{ item.name }}</span>
          <span class="left-center-title1">{{ item.usePeopleNumber }} 人</span>
        </div>
      </div>
      <!-- 右边内容 -->
      <div class="right">
        <!-- 编辑删除 -->
        <div class="right-top">
          <div style="color: #3c3d43; font-size: 18px">
            {{ detaile ? detaile.name : "---" }}
          </div>
          <div>
            <a-button type="primary" ghost style="margin-right: 15px" @click="deleteVisible = true">
              删除
            </a-button>
            <a-button type="primary" @click="onClickEdit"> 编辑 </a-button>
          </div>
        </div>
        <!-- 工价计算 -->
        <div style="margin-top: 20px">
          <div class="shu">
            <div class="shuxian"></div>
            <div style="color: #000000; font-size: 16px; margin-left: 10px">
              工价计算
            </div>
          </div>
          <div style="margin-top: 15px">
            <span style="color: #767885; font-size: 14px; margin-left: 15px">算薪方式：</span
            ><span style="color: #3c3d43; font-size: 14px; margin-left: 5px">计时制 {{ detaile ? detaile.hourAmount : "0" }} 元/时</span>
          </div>
          <div style="margin-top: 5px" v-for="(item, index) in detaile ? detaile.hourAmountRule : []" :key="'info1-' + index">
            <span style="color: #767885; font-size: 14px; margin-left: 35px">条件{{ index + 1 }}:</span>
            <span style="color: #3c3d43; font-size: 14px; margin-left: 5px" v-if="item.type === '2'">
              满{{ item.number }}{{ item.units | filterType }}后，变为{{ item.newHourAmount }}元/时
            </span>
            <span style="color: #3c3d43; font-size: 14px; margin-left: 5px" v-if="item.type === '1'">
              自{{ item.time }}后，变为{{ item.newHourAmount }}元/时
            </span>
          </div>
        </div>
        <!-- 额外规则 -->
        <div style="margin-top: 20px">
          <div class="shu">
            <div class="shuxian"></div>
            <div style="color: #000000; font-size: 16px; margin-left: 10px">
              额外规则
            </div>
          </div>
          <div
            style="
            margin-top: 15px;
            color: #3c3d43;
            font-size: 14px;
            margin-left: 15px;
            font-weight: 1000;
          "
          >
            一次性红包
          </div>
          <div style="margin-top: 5px" v-for="(item, index) in detaile ? detaile.redPacketRule : []" :key="'info2-' + index">
            <span style="color: #767885; font-size: 14px; margin-left: 35px">条件{{ index + 1 }}:</span>
            <span style="color: #3c3d43; font-size: 14px; margin-left: 5px">
              入职满{{ item.number }}{{ item.units | filterType }}后,一次性红包{{ item.redPacketAmount }}元
            </span>
          </div>
          <div
            style="
            margin-top: 15px;
            color: #3c3d43;
            font-size: 14px;
            margin-left: 15px;
            font-weight: 1000;
          "
          >
            离职倒扣
          </div>
          <div style="margin-top: 5px" v-for="(item, index) in detaile ? detaile.leaveOfficeRule : []" :key="'info3-' + index">
            <span style="color: #767885; font-size: 14px; margin-left: 35px">条件{{ index + 1 }}:</span>
            <span style="color: #3c3d43; font-size: 14px; margin-left: 5px" v-if="item.type === '1'">
              不满{{ item.number }}{{ item.units | filterType }}后，倒扣{{ item.deductAmount }}元工资
            </span>
            <span style="color: #3c3d43; font-size: 14px; margin-left: 5px" v-if="item.type === '2'">
              不满{{ item.number }}{{ item.units | filterType }}后，工价{{ item.newHourAmount }}元/小时
            </span>
          </div>
        </div>
        <!-- 使用者 -->
        <div style="margin-top: 20px">
          <div class="shu">
            <div class="shuxian"></div>
            <div style="color: #000000; font-size: 16px; margin-left: 10px">
              使用者
            </div>
          </div>
        </div>
        <!-- 搜索 -->
        <a-input-search
          v-model="nameOrIdCard"
          placeholder="搜索姓名/身份证号"
          style="width: 201px; height: 32px; margin-top: 14px"
          @search="onSearch1"
        />
        <!-- 表格 -->
        <a-table style="margin-top: 15px" rowKey="id" :columns="columns" :data-source="dataList" :pagination="paginationOpt">
          <span slot="channelName" slot-scope="text, record">
            {{ record.channelVO ? record.channelVO.name : "---" }}
          </span>
        </a-table>
      </div>
      <!-- 添加抽屉 -->
      <a-drawer :title="title" class="drawer" :placement="placement" width="580px" :visible="visible" @close="visible = false">
        <div>
          规则名称
          <a-input style="width: 220px" placeholder="请输入" v-model="name" />
        </div>
        <div style="margin-top: 20px">
          <div class="shu">
            <div class="shuxian"></div>
            <div style="color: #000000; font-size: 16px; margin-left: 10px">
              工价计算
            </div>
          </div>
        </div>
        <a-radio-group v-model="ruleType" style="margin-top: 10px">
          <a-radio-button value="1"> 计时制 </a-radio-button>
          <!-- <a-radio-button value="0"> 同工同酬 </a-radio-button> -->
        </a-radio-group>
        <div v-if="ruleType !== '0'">
          <!-- 工价计算新增条件 -->
          <div style="margin-top: 10px">
            工价
            <a-input-number :min="1" style="width: 88px; margin-right: 10px" v-model="hourAmount" />
            元/小时
            <a-dropdown style="margin-left: 10px">
              <a-menu slot="overlay" @click="handleMenuClick1">
                <a-menu-item key="2"> 不满月/天/工时倒扣工资 </a-menu-item>
                <a-menu-item key="1"> 固定日期变更工价 </a-menu-item>
              </a-menu>
              <a-button type="primary" ghost><a-icon type="plus" />新增变更条件</a-button>
            </a-dropdown>
          </div>
          <div style="margin-top: 10px" v-for="(item, index) in labourList" :key="'info4-' + index">
            <span v-if="item.type === '2'">
              入职满
              <a-input-number :min="1" style="width: 88px; margin-right: 10px" v-model="item.number" />
              <a-select style="width: 120px; margin-right: 10px" v-model="item.units">
                <a-select-option v-for="(item, index) in option" :key="index" :value="item.value">
                  {{ item.label }}
                </a-select-option>
              </a-select>
              倒扣
              <a-input-number style="width: 88px; margin-left: 5px" :min="1" v-model="item.newHourAmount" />
              元/小时
            </span>

            <span v-if="item.type === '1'">
              自
              <a-date-picker
                :value="item.time ? moment(item.time, 'YYYY-MM-DD') : ''"
                @change="(date, dateString) => onDateChange(date, dateString, item)"
              />
              工价变为
              <a-input-number style="width: 88px; margin-left: 5px" :min="1" v-model="item.newHourAmount" />
              元/小时
            </span>
            <a-icon class="deleteIcon" type="delete" style="font-size: 18px; margin-left: 10px" @click="deletelabourList(item, index)" />
          </div>
          <!-- 一次性红包新增条件 -->
          <div style="margin-top: 20px">
            <div class="shu">
              <div class="shuxian"></div>
              <div style="color: #000000; font-size: 16px; margin-left: 10px">
                额外规则
              </div>
            </div>
          </div>
          <a-checkbox :checked="checked" @change="onChange" style="margin-top: 15px">
            一次性红包
          </a-checkbox>
          <div style="margin-top: 10px" v-for="(item, index) in numList" :key="'info5-' + index">
            满
            <a-input-number :min="1" style="width: 88px; margin-right: 10px" v-model="item.number" />
            <a-select style="width: 120px; margin-right: 10px" v-model="item.units">
              <a-select-option v-for="(item, index) in option" :key="index" :value="item.value">
                {{ item.label }}
              </a-select-option>
            </a-select>
            发放
            <a-input-number style="width: 88px; margin-left: 5px" :min="1" v-model="item.redPacketAmount" />
            元红包
            <a-icon class="deleteIcon" type="delete" style="font-size: 18px; margin-left: 10px" @click="deleteNumList(item, index)" />
            <a-icon class="addIcon" type="plus-circle" style="font-size: 18px; margin-left: 10px" @click="createNumList" />
          </div>
          <!-- 离职倒扣新增条件 -->
          <div>
            <a-checkbox :checked="checked1" @change="onChange1" style="margin-top: 15px">
              离职倒扣
            </a-checkbox>
          </div>
          <div style="margin-top: 15px" v-if="checked1">
            <a-dropdown>
              <a-menu slot="overlay" @click="handleMenuClick">
                <a-menu-item key="1"> 不满月/天/工时倒扣工资 </a-menu-item>
                <a-menu-item key="2"> 不满月/天/工时减少全价 </a-menu-item>
              </a-menu>
              <a-button type="primary" ghost><a-icon type="plus" />新增倒扣条件</a-button>
            </a-dropdown>
          </div>
          <div style="margin-top: 10px" v-for="(item, index) in leaveList" :key="'info6-' + index">
            不满
            <a-input-number :min="1" style="width: 88px; margin-right: 10px" v-model="item.number" />
            <a-select style="width: 120px; margin-right: 10px" v-model="item.units">
              <a-select-option v-for="(item, index) in option" :key="index" :value="item.value">
                {{ item.label }}
              </a-select-option>
            </a-select>
            <span v-if="item.type === '1'">
              倒扣
              <a-input-number style="width: 88px; margin-left: 5px" :min="1" v-model="item.deductAmount" />
              元工资
            </span>
            <span v-if="item.type === '2'">
              工价变为
              <a-input-number style="width: 88px; margin-left: 5px" :min="1" v-model="item.newHourAmount" />
              元/小时
            </span>
            <a-icon class="deleteIcon" type="delete" style="font-size: 18px; margin-left: 10px" @click="deleteleaveList(item, index)" />
          </div>
        </div>
        <div
          :style="{
            position: 'absolute',
            bottom: 0,
            width: '100%',
            borderTop: '1px solid #e8e8e8',
            padding: '10px 16px',
            textAlign: 'center',
            left: 0,
            background: '#fff',
            borderRadius: '0 0 4px 4px'
          }"
        >
          <a-button style="margin-right: 20px" @click="visible = false">
            取消
          </a-button>
          <a-button type="primary" @click="onClose" v-if="title == '新增工价规则'">
            确定
          </a-button>
          <a-button type="primary" @click="onCloseEdit" v-else>
            确定
          </a-button>
        </div>
      </a-drawer>
      <!-- 删除弹窗 -->
      <a-modal title="删除工价规则" :visible="deleteVisible" @ok="deleteOk" @cancel="deleteVisible = false">
        <div style="display: flex; justify-content: space-around">
          <a-icon type="question-circle" style="font-size: 24px; color: #6a66f6" />
          <p
            style="
            font-size: 16px;
            font-weight: 500;
            color: #3c3d43;
            line-height: 20px;
          "
          >
            您确定要删除该规则吗？一旦删除不可恢复
          </p>
        </div>
      </a-modal>
    </div>
  </a-spin>
</template>
<script>
import { formatDate } from "@/utils/index";
import {
  salaryCalculateRules,
  salaryCalculateRulesList,
  salaryCalculateRulesEdit,
  salaryCalculateRulesDelete,
  salaryCalculateRulesEdits,
  selectEmpInfoVoBySalaryCalculateRuleId
} from "@/api/outsourcing/outrules";
const columns = [
  {
    title: "姓名",
    dataIndex: "name",
    key: "name",
    width: 100
  },
  {
    title: "联系电话",
    dataIndex: "phone",
    key: "phone",
    width: 120
  },
  {
    title: "最近入职日期",
    dataIndex: "joinDate",
    key: "joinDate",
    customRender: (text, record, index) => {
      return formatDate(text);
    },
    width: 120,
    scopedSlots: { customRender: "joinDate" }
  },
  {
    title: "当前用工单位",
    dataIndex: "workingUnitName",
    key: "workingUnitName",
    width: 100
  },
  {
    title: "渠道来源",
    dataIndex: "channelName",
    key: "channelName",
    width: 100,
    scopedSlots: { customRender: "channelName" }
  }
];
import moment from "moment";
export default {
  data() {
    return {
      value: "",
      spinning: false,
      nameOrIdCard: "",
      columns,
      checked: false, // 一次性红包
      checked1: false, // 离职
      deleteVisible: false,
      dataList: [], // 列表数据
      ruleType: "1",
      numList: [],
      leaveList: [],
      labourList: [],
      hourAmount: null,
      showName: false,
      salaryCalculateRuleId: "",
      option: [
        {
          label: "月",
          value: 1
        },
        {
          label: "天",
          value: 2
        },
        {
          label: "工时",
          value: 3
        }
      ],
      listIndex: 0,
      title: "",
      visible: false,
      placement: "right",
      name: "",
      list: [],
      detaile: null,
      paginationOpt: {
        current: 1,
        defaultCurrent: 1, // 默认当前页数
        defaultPageSize: 5, // 默认当前页显示数据的大小
        total: 0, // 总数，必须先有
        showSizeChanger: true,
        showQuickJumper: true,
        pageSizeOptions: ["5", "10", "20"],
        showTotal: total => `共 ${total} 条`, // 显示总数
        onShowSizeChange: (current, pageSize) => {
          this.paginationOpt.current = 1;
          this.paginationOpt.defaultCurrent = 1;
          this.paginationOpt.defaultPageSize = pageSize;
          this.ruleList(); // 显示列表的接口名称
        },
        // 改变每页数量时更新显示
        onChange: (current, size) => {
          this.paginationOpt.current = current;
          this.paginationOpt.defaultCurrent = current;
          this.paginationOpt.defaultPageSize = size;
          this.ruleList();
        }
      }
    };
  },
  filters: {
    filterType(val) {
      if (val === 1) {
        return "月";
      } else if (val === 2) {
        return "天";
      } else if (val === 3) {
        return "工时";
      } else {
        return "";
      }
    }
  },
  created() {
    this.ruleList();
  },
  methods: {
    // 搜索规则
    onSearch(value) {
      this.value = value;
      this.ruleList();
    },
    // 搜索规则
    onSearch1(value) {
      this.nameOrIdCard = value;
      this.ruleList();
    },
    // 获取列表和右边数据
    ruleList() {
      this.spinning = true;
      salaryCalculateRulesList({ ruleType: 1, name: this.value, isShowPeopleNumber: true }).then(res => {
        this.list = res.data;
        if (this.list.length > 0) {
          this.salaryCalculateRuleId = res.data[0].id;
          salaryCalculateRulesEdit(this.salaryCalculateRuleId).then(res => {
            const obj = res.data;
            obj.hourAmountRule = JSON.parse(obj.hourAmountRule);
            obj.leaveOfficeRule = JSON.parse(obj.leaveOfficeRule);
            obj.redPacketRule = JSON.parse(obj.redPacketRule);
            this.detaile = obj;
          });
          selectEmpInfoVoBySalaryCalculateRuleId({
            nameOrIdCard: this.nameOrIdCard,
            pageNo: this.paginationOpt.defaultCurrent,
            pageSize: this.paginationOpt.defaultPageSize,
            salaryCalculateRuleId: this.salaryCalculateRuleId
          }).then(res => {
            this.dataList = res.data.entities;
            this.paginationOpt.total = res.data && res.data.entityCount;
            this.spinning = false;
          });
        } else {
          this.spinning = false;
          this.detaile = null;
        }
      });
    },
    // 获取数组里的每一个时间
    onDateChange(date, dateString, item) {
      item.time = dateString;
    },
    // 删除规则
    deleteOk() {
      salaryCalculateRulesDelete(this.salaryCalculateRuleId).then(res => {
        if (res.code === 200) {
          this.$message.success("删除成功");
          this.deleteVisible = false;
          this.listIndex = 0;
          this.ruleList();
        }
      });
    },
    // 左侧侧边栏内容点击事件
    onClickRule(item, index) {
      this.spinning = true;
      this.listIndex = index;
      this.clear();
      if (item) {
        this.salaryCalculateRuleId = item.id;
      }
      salaryCalculateRulesEdit(this.salaryCalculateRuleId).then(res => {
        const obj = res.data;
        obj.hourAmountRule = JSON.parse(obj.hourAmountRule);
        obj.leaveOfficeRule = JSON.parse(obj.leaveOfficeRule);
        obj.redPacketRule = JSON.parse(obj.redPacketRule);
        this.detaile = obj;
      });
      selectEmpInfoVoBySalaryCalculateRuleId({
        nameOrIdCard: this.nameOrIdCard,
        pageNo: this.paginationOpt.defaultCurrent,
        pageSize: this.paginationOpt.defaultPageSize,
        salaryCalculateRuleId: this.salaryCalculateRuleId
      }).then(res => {
        this.dataList = res.data.entities;
        this.spinning = false;
      });
    },
    // 清空内容
    clear() {
      this.name = "";
      this.hourAmount = "";
      this.checked = false;
      this.checked1 = false;
      this.labourList = [];
      this.numList = [];
      this.leaveList = [];
    },
    // 添加事件
    onCreate() {
      this.title = "新增工价规则";
      this.visible = true;
      this.ruleType = "1";
      this.clear();
    },
    // 一次性红包添加事件
    onChange(e) {
      if (e.target.checked) {
        this.numList.push({ number: null, units: "", redPacketAmount: null });
        this.checked = true;
      } else {
        this.numList = [];
        this.checked = false;
      }
    },
    // 离职倒扣添加事件
    onChange1(e) {
      if (e.target.checked) {
        this.checked1 = true;
      } else {
        this.checked1 = false;
        this.leaveList = [];
      }
    },
    // 一次性红包数组
    createNumList() {
      this.numList.push({ number: null, units: "", redPacketAmount: null });
    },
    // 一次性红包删除
    deleteNumList(item, index) {
      this.numList.splice(index, 1);
      if (this.numList.length === 0) {
        this.checked = false;
      }
    },
    //  离职倒扣删除
    deleteleaveList(item, index) {
      this.leaveList.splice(index, 1);
      if (this.leaveList.length === 0) {
        this.checked1 = false;
      }
    },
    // 工价计算删除
    deletelabourList(item, index) {
      this.labourList.splice(index, 1);
    },
    // 倒扣数组
    handleMenuClick(e) {
      if (e.key === "1") {
        this.leaveList.push({
          type: e.key,
          number: null,
          units: "",
          deductAmount: null
        }); // 不满月/天/工时倒扣工资
      } else {
        this.leaveList.push({
          type: e.key,
          number: null,
          units: "",
          newHourAmount: null
        }); // 不满月/天/工时减少全价
      }
    },
    // 工价计算数组
    handleMenuClick1(e) {
      if (e.key === "2") {
        this.labourList.push({
          type: e.key,
          number: null,
          units: "",
          newHourAmount: null
        }); // 不满月/天/工时倒扣工资
      } else {
        this.labourList.push({
          type: e.key,
          time: null,
          newHourAmount: null
        }); // 不满月/天/工时减少全价
      }
    },
    // 添加规则
    onClose() {
      var num = 0;
      var num1 = 0;
      if (this.ruleType === "1") {
        // 判断规则名称有没有
        if (this.name !== "") {
          this.showName = true;
        } else {
          this.showName = false;
          this.$message.error("请填写规则名称");
        }
        // 当规则名称存在,并且红包和倒扣没有的时候执行
        if (this.showName && !this.checked && !this.checked1) {
          this.createList();
        }
        // 判断有没有红包规则
        if (this.checked) {
          if (this.numList.length > 0) {
            this.numList.map(res => {
              if (res.number === null || res.units === "" || res.redPacketAmount === null) {
                this.$message.error("红包规则内容都为必填");
              } else {
                num += 1;
              }
            });
          }
        }
        // 当规则名称和红包规则存在,并且倒扣没有的时候执行
        if (this.showName && this.checked && !this.checked1) {
          if (num === this.numList.length) {
            this.createList();
          }
        }
        // 判断有没有倒扣规则
        if (this.checked1) {
          if (this.leaveList.length > 0) {
            this.leaveList.map(res => {
              if (res.type === "1") {
                if (res.number === null || res.units === "" || res.deductAmount === null) {
                  this.$message.error("倒扣规则内容都为必填");
                } else {
                  num1 += 1;
                }
              } else if (res.type === "2") {
                if (res.number === null || res.units === "" || res.newHourAmount === null) {
                  this.$message.error("倒扣规则内容都为必填");
                } else {
                  num1 += 1;
                }
              }
            });
          }
        }
        // 当规则名称和红包、倒扣规则都存在
        if (this.showName && this.checked && this.checked1) {
          if (num1 === this.leaveList.length && num === this.numList.length) {
            this.createList();
          }
        }
        // 当规则名称和倒扣规则存在,并且红包规则没有的时候执行
        if (this.showName && this.checked1 && !this.checked) {
          if (num1 === this.leaveList.length) {
            this.createList();
          }
        }
      } else {
        if (this.name !== "") {
          const objs = {
            name: this.name,
            ruleType: 3
          };
          salaryCalculateRules(objs).then(res => {
            if (res.code === 200) {
              this.$message.success("添加成功");
              this.visible = false;
              this.ruleList();
            }
          });
        } else {
          this.$message.error("请填写规则名称");
        }
      }
    },
    // 添加规则方法
    createList() {
      const obj = {
        name: this.name,
        hourAmount: this.hourAmount,
        hourAmountRule: JSON.stringify(this.labourList),
        leaveOfficeRule: JSON.stringify(this.leaveList),
        redPacketRule: JSON.stringify(this.numList),
        ruleType: 1
      };
      salaryCalculateRules(obj).then(res => {
        if (res.code === 200) {
          this.$message.success("添加成功");
          this.visible = false;
          this.ruleList();
        }
      });
    },
    // 编辑规则
    onClickEdit() {
      salaryCalculateRulesEdit(this.salaryCalculateRuleId).then(res => {
        this.visible = true;
        this.title = "编辑工价规则";
        this.name = res.data.name;
        this.hourAmount = res.data.hourAmount;
        this.ruleType = JSON.stringify(res.data.ruleType);
        this.labourList = JSON.parse(res.data.hourAmountRule) || [];
        this.numList = JSON.parse(res.data.redPacketRule) || [];
        this.leaveList = JSON.parse(res.data.leaveOfficeRule) || [];
        if (this.numList.length > 0) {
          this.checked = true;
        }
        if (this.leaveList.length > 0) {
          this.checked1 = true;
        }
      });
    },
    // 编辑确定
    onCloseEdit() {
      var num2 = 0;
      var num3 = 0;
      // 判断规则名称有没有
      if (this.name !== "") {
        this.showName = true;
      } else {
        this.showName = false;
        this.$message.error("请填写规则名称");
      }
      // 当规则名称存在,并且红包和倒扣没有的时候执行
      if (this.showName && !this.checked && !this.checked1) {
        this.editList();
      }
      // 判断有没有红包规则
      if (this.checked) {
        if (this.numList.length > 0) {
          this.numList.map(res => {
            if (res.number === null || res.units === "" || res.redPacketAmount === null) {
              this.$message.error("红包规则内容都为必填");
            } else {
              num2 += 1;
            }
          });
        }
      }
      // 当规则名称和红包规则存在,并且倒扣没有的时候执行
      if (this.showName && this.checked && !this.checked1) {
        if (num2 === this.numList.length) {
          this.editList();
        }
      }
      // 判断有没有倒扣规则
      if (this.checked1) {
        if (this.leaveList.length > 0) {
          this.leaveList.map(res => {
            if (res.type === "1") {
              if (res.number === null || res.units === "" || res.deductAmount === null) {
                this.$message.error("倒扣规则内容都为必填");
              } else {
                num3 += 1;
              }
            } else if (res.type === "2") {
              if (res.number === null || res.units === "" || res.newHourAmount === null) {
                this.$message.error("倒扣规则内容都为必填");
              } else {
                num3 += 1;
              }
            }
          });
        }
      }
      // 当规则名称和红包、倒扣规则都存在
      if (this.showName && this.checked && this.checked1) {
        if (num3 === this.leaveList.length && num2 === this.numList.length) {
          this.editList();
        }
      }
      // 当规则名称和倒扣规则存在,并且红包规则没有的时候执行
      if (this.showName && this.checked1 && !this.checked) {
        if (num3 === this.leaveList.length) {
          this.editList();
        }
      }
    },
    // 添加规则方法
    editList() {
      const obj = {
        id: this.salaryCalculateRuleId,
        name: this.name,
        hourAmount: this.hourAmount,
        hourAmountRule: JSON.stringify(this.labourList),
        leaveOfficeRule: JSON.stringify(this.leaveList),
        redPacketRule: JSON.stringify(this.numList),
        ruleType: 1
      };
      salaryCalculateRulesEdits(obj).then(res => {
        if (res.code === 200) {
          this.$message.success("编辑成功");
          this.visible = false;
          this.ruleList();
        }
      });
    }
  }
};
</script>
<style lang="scss" scoped>
.body {
  width: 100%;
  min-height: 820px;
  background-color: #ffffff;
  padding: 20px;
  display: flex;
  flex-direction: row;
  .left {
    width: 365px;
    min-height: 820px;
    border-right: 1px solid #cccccc;
    background-color: #ffffff;
    .left-top {
      display: flex;
      flex-direction: row;
      justify-content: space-between;
      margin-top: 26px;
      .title {
        margin-left: 24px;
        color: #000000;
        font-size: 16px;
        font-weight: 700;
      }
      .icon {
        margin-right: 5px;
        color: var(--primary);
        font-size: 20px;
      }
      .title1 {
        margin-right: 36px;
        color: var(--primary);
        font-size: 14px;
        font-weight: 1000;
      }
    }
    .xian {
      width: 343px;
      height: 1px;
      background-color: #cccccc;
      margin: 15px 0 10px 0;
    }
    .left-center {
      width: 343px;
      height: 48px;
      border-bottom: 1px solid #cccccc;
      background: #ffffff;
      display: flex;
      flex-flow: row;
      align-items: center;
      justify-content: space-between;
      .left-center-title {
        margin-left: 24px;
        color: #55565d;
        font-size: 14px;
      }
      .left-center-title1 {
        margin-right: 16px;
        color: #55565d;
        font-size: 14px;
      }
    }
    .active {
      background: #f0effe;
    }
    .listTitle {
      margin-left: 24px;
      font-size: 15px;
      color: var(--primary);
    }
  }
  .right {
    display: flex;
    flex: 1;
    flex-direction: column;
    margin-top: 24px;
    padding: 0 10px 0 15px;
    background-color: #ffffff;
    .right-top {
      width: 100%;
      display: flex;
      flex-direction: row;
      justify-content: space-between;
    }
  }
}
.shu {
  width: 100%;
  display: flex;
  flex-direction: row;
  align-items: center;
  .shuxian {
    width: 3px;
    height: 20px;
    background: var(--primary);
  }
}
.deleteIcon:hover {
  color: #fa5051;
}
.addIcon {
  color: var(--primary);
}
</style>
